import React from "react";
import { Card } from "antd";
import style from "./style.module.css";
import { Tag } from "antd";
import { Line } from '@ant-design/charts';
import { useState, useEffect } from 'react'

function Index(props) {

  console.log(props.list, 'props')
  let [list, setList] = useState([{
    "Date": "今天",
    "scales": 15
  },
  {
    "Date": "昨天",
    "scales": 10
  },
  {
    "Date": "前天",
    "scales": 5
  },])
  const formatDate = (date) => {
    var date = new Date(date);
    var YY = date.getFullYear() + '-';
    var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
    return YY + MM + DD;
  }
  useEffect(() => {
    // setData(props.list.data)
    let a = props.list.num;
    if (a && a.length) {
      let time = formatDate(Date.now());
      let newArr = a.findIndex((item) => item.time === time)
      console.log(newArr, 'newArr')
      let c = list.map((item, idx) => {
        let scales2 = a[newArr] ? a[newArr].num : 0;
        newArr--;
        console.log(newArr)
        return {
          ...item,
          scales: scales2,

        }
      })

      setList(c.reverse())
    }

  }, [props.list])
  useEffect(() => {
    console.log(list, 'list')
  }, [list])
  // useEffect(() => {
  //   asyncFetch();
  // }, []);
  // const asyncFetch = () => {
  //   fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
  //     .then((response) => response.json())
  //     .then((json) => setData(json))
  //     .catch((error) => {
  //       console.log('fetch data failed', error);
  //     });
  // };

  var config = {
    data: list,
    padding: 'auto',
    xField: "Date",
    yField: "scales",
    height: 100,
    smooth: true,
  };
  return (
    <div className={style.Box}>
      <Card className={style.chartBox}>
        <div className={style.text}>
          <p>{props.list.title || '0'}</p>
          <Tag color="blue">昨日</Tag>
        </div>
        <div className={style.price}>{list.length ? list[list.length - 1].scales : '0'}</div>
        <p className={style.allprice}>总销售额:123123.00元</p>
        <Line {...config} />
      </Card>
    </div>
  );
}

export default Index;
